<template>
  <div class="myContainer">
    <el-container>
      <el-aside class="myBorder myLeft" id="myLeft">
        <el-row>
          <el-col :span="19" class="myFontWeight">
            维保任务基础信息
          </el-col>
          <el-col :span="5" class="myTextAlignRight myFontBtn">
            <span class="el-icon-arrow-right myArrowBtn"></span>
          </el-col>
        </el-row>
        <el-row class="myBorderTop" v-if="isClick">
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">任务名称 :</el-col>
            <el-col :span="16">{{name}}</el-col>
          </el-row>
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">任务ID :</el-col>
            <el-col :span="16">{{id}}</el-col>
          </el-row>
          <!-- <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">任务提交时间 :</el-col>
            <el-col :span="16">2017/09/01 15:00</el-col>
          </el-row> -->
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">是否逾期 :</el-col>
            <el-col :span="16">{{overdue_days}}</el-col>
          </el-row>
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">任务执行人 :</el-col>
            <el-col :span="16">{{deal_username}}</el-col>
          </el-row>
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">联系电话 :</el-col>
            <el-col :span="16">{{deal_userphone}}</el-col>
          </el-row>
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">所属小区 :</el-col>
            <el-col :span="16">{{areaname}}</el-col>
          </el-row>
          <!-- <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">所属计划 :</el-col>
            <el-col :span="16">鸥鹏K城2017年1栋发排风机维保计划</el-col>
          </el-row>
          <el-row class="myPaddingBottom_10px" :gutter="10">
            <el-col :span="8" class="myTextAlignRight">任务对象 :</el-col>
            <el-col :span="16">1栋排风机</el-col>
          </el-row> -->
        </el-row>
      </el-aside>
      <el-main class="myPaddingLeft_10px">
        <el-row class="myRight">
          <el-row>
            <el-col :span="20" class="myFontWeight myLineHeight_40px">
              <el-row>
                <el-col :span="4">
                  维保任务执行项检查
                </el-col>
                <el-col :span="4">
                  <span class="myPaddingLeft_10px">检查结论 :</span>
                  <span>{{isOk}}</span>
                </el-col>
                <el-col :span="8">
                  <span class="myPaddingLeft_10px">整改期间 :</span>
                  <el-input placeholder="天" class="myInputText" v-model="rectify_days"></el-input>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" class="myTextAlignRight">
              <!-- <input type="button" value="提 交" class="mySub" /> -->
              <el-button type="primary" class="myBgGreen" @click="onSub">提 交</el-button>
            </el-col>
          </el-row>
          <el-row class="myPaddingTop_10px myBorderTop">
            <el-col :span="24">
              <template>
                <el-table
                  border
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-row>
                        <el-col :span="2" :offset="2">自检状态:</el-col>
                        <el-col :span="20" class="myTextAlignLeft">
                          <span v-if="props.row.deal_status==0" style="color: #f56c6c;">异常</span>
                          <span v-else style="color: #67c23a;">正常</span>
                        </el-col>        
                      </el-row>
                      <el-row>
                        <el-col :span="2" :offset="2">处理信息:</el-col>
                        <el-col :span="20" class="myTextAlignLeft">{{props.row.subject_note}}</el-col>        
                      </el-row>
                      <el-row class="myPaddingTop_10px">
                        <el-col :span="2" :offset="2">图片信息:</el-col>
                        <el-col :span="20" class="myTextAlignLeft">
                          <img :src=x.file_path width="300" v-for="x in props.row.attachments" style="margin-right: 10px;"/>
                        </el-col>        
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="序号"
                    type="index"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    label="维保执行项目"
                    prop="subjectname">
                  </el-table-column>
                  <el-table-column
                    label="检查结论"
                    prop="checkText">
                  </el-table-column>
                  <el-table-column
                    label="不通过描述信息"
                    prop="check_note">
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="操作">
                    <template scope="scope">
                      <!-- <el-button class="look" type="text" size="small" @click="editDialogVisible = true">编辑</el-button> | -->
                      <!-- <span v-if="scope.row.check_status==-1"> -->
                        <el-button class="look" type="text" size="small" @click="onOk(scope.$index)">通过</el-button> |
                        <el-button class="look" type="text" size="small" @click="onNo(scope.$index,scope.row.subjectname)">不通过</el-button>
                      <!-- </span> -->
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-col>
          </el-row>
        </el-row>
      </el-main>
    </el-container>


    
    <!--通过弹出框 start -->
    <el-dialog title="警告" class="myRoleDialog" :visible.sync="adoptDialogVisible">
      <el-row>
        <el-col :span="20" :offset="2">
          是否将该执行项状态更改为通过，确认将清除检查信息并更改状态！
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="adoptDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" >确 定</el-button>
      </div>
    </el-dialog>
    <!--通过弹出框 end--> 

    <!--不通过弹出框 start-->
    <el-dialog title="不通过描述" :visible.sync="notpassDialogVisible">
      <el-row>
        <el-col :span="4" class="myLeftMsg">
          任务项名称 :
        </el-col>
        <el-col :span="18">
          <el-input placeholder="任务项名称" v-model="noName" readonly></el-input>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px my">
        <el-col :span="4" class="myLeftMsg">
          不通过描述 :
        </el-col>
        <el-col :span="18">
          <el-input type="textarea" placeholder="不通过描述" v-model="check_note"></el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="notpassDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onNoSub">确 定</el-button>
      </div>
    </el-dialog>
    <!--不通过弹出框 end-->  
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myContainerLeft_300px{
    width: 300px;
  }
  .myPaddingLeft_10px{
    padding:0 0 0 10px;
  }
  .myBorder{
    border: 1px solid #dcdcdc; 
    padding:5px;
    width: 300px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myFontWeight{
    font-weight: 500;
    font-size: 14px;
  }
  .myBorderTop{
    border-top: 1px solid #dcdcdc;
    padding-top: 10px;
    margin-top:5px; 
  }
  .myArrowBtn{
    cursor: pointer;
  }
  .myLeft{
    width: 50px !important;
    font-weight: 500;
  }
  .myLeft .myFontWeight{
    font-size: 20px;
    line-height: 1.5;
    float: right;
    margin: 100px 0 50px 0;
  }
  .myLeft .myFontBtn{
    font-size: 25px;
    line-height: 2;
    float: left;
  }
  .myLeft .myFontBtn .myArrowBtn{
    margin-left: 7px;
  }
  .myRight{
     border: 1px solid #dcdcdc;
     padding: 5px;
  }
  .myInputText{
    width: 100px;
  }
  .mySub{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
  }
  .mySub:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top:10px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-button span{
    color: #000
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myTextAlignLeft{
    text-align: left;
  }
</style>
<script>
  import { getTaskDetail , subInspect , getRectifyTaskDetail } from '@/api/maintenanceplan';
  export default {
    data(){
      return{
        isClick:false,
        num:1,
        tableData:[],
        editDialogVisible:false,
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
        adoptDialogVisible:false,
        notpassDialogVisible:false,
        id:"",

        loading:false,
        name:"",//任务名称
        plan_id:"",//计划id
        overdue_days:"",//逾期时间
        deal_username:"",//执行人
        deal_userphone:"",//执行人电话
        areaname:"",//所属小区

        rectify_days:"",//整改天数
        subData:{},//提交的检查数据
        subIndex:"",//待通过表格下标
        noIndex:"",//待不通过表格下标
        noName:"",//未通过的任务名
        check_note:"",//未通过描述
        isOk:"未通过"//检查是否通过
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '维保任务检查';
      let vm=this;
      // 点击左侧侧栏伸缩按钮  start
      this.isClick?$("#myLeft").removeClass("myLeft"):$("#myLeft").addClass("myLeft");
      $(".myArrowBtn").click(function(){
        if(vm.num%2==1){
          $(this).removeClass("el-icon-arrow-right").addClass("el-icon-arrow-left");
          $("#myLeft").removeClass("myLeft");
          vm.isClick=true;
        }else{          
          $(this).removeClass("el-icon-arrow-left").addClass("el-icon-arrow-right");
          $("#myLeft").addClass("myLeft");
          vm.isClick=false;
        }
        vm.num++;
      })
      // 点击左侧侧栏伸缩按钮  end
      
      vm.id = vm.$route.query.id;
      vm.task_type = vm.$route.query.task_type;
      if(vm.task_type==1){
        vm.onGetTaskDetail();
      }
      if(vm.task_type==2){
        vm.onGetRectifyTaskDetail();
      }
    },
    methods:{     
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      onGetTaskDetail(){
        let vm=this;
        vm.loading=true;
        getTaskDetail(vm.id).then(response => {
          let res=response.data;
          vm.name=res.name;
          vm.plan_id=res.plan_id;
          let ot="";
          if(res.overdue_days>0){
            ot="逾期"+res.overdue_days+"天";
          }else{
            ot="否";
          }
          vm.overdue_days=ot;
          vm.deal_username=res.deal_username;
          vm.deal_userphone=res.deal_userphone;
          vm.areaname=res.areaname;
          vm.tableData=res.subjects;

          let subList=[];
          for(let i=0; i<res.subjects.length; i++){
            subList.push({
              "subject_id":res.subjects[i].subject_id,
              "check_note":res.subjects[i].check_note,
              "check_status":res.subjects[i].check_status
            })
          }
          vm.subData={
            plan_id:vm.id,
            tasktype:res.tasktype,
            rectify_days:"",
            subjects:subList
          };

          vm.loading=false;
          console.log(res,vm.subData)
        }).catch(error => {
          vm.loading=false;
          console.log(error)
        })
      },
      onGetRectifyTaskDetail(){
        let vm=this;
        vm.loading=true;
        getRectifyTaskDetail(vm.id).then(response => {
          let res=response.data;
          vm.name=res.name;
          vm.plan_id=res.plan_id;
          let ot="";
          if(res.overdue_days>0){
            ot="逾期"+res.overdue_days+"天";
          }else{
            ot="否";
          }
          vm.overdue_days=ot;
          vm.deal_username=res.deal_username;
          vm.deal_userphone=res.deal_userphone;
          vm.areaname=res.areaname;
          vm.tableData=res.subjects;
          

          let subList=[];
          for(let i=0; i<res.subjects.length; i++){
            subList.push({
              "subject_id":res.subjects[i].subject_id,
              "check_note":res.subjects[i].check_note,
              "check_status":res.subjects[i].check_status
            })
          }
          vm.subData={
            plan_id:vm.id,
            tasktype:res.tasktype,
            rectify_days:"",
            subjects:subList
          };

          vm.loading=false;
          console.log(res,vm.subData)
        }).catch(error => {
          vm.loading=false;
          console.log(error)
        })
      },
      onSub(){//提交检查数据
        let vm=this;
        if(vm.isOk=="未通过" && !vm.rectify_days){
          vm.$message.error("请输入整改天数！");
          return;
        }
        if(vm.isOk=="已通过"){
          vm.subData.rectify_days=0;
        }else{
          vm.subData.rectify_days=vm.rectify_days;
        }
        //console.log(vm.subData)
        subInspect(vm.subData).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.$router.go(-1);
          //console.log("ok")
        }).catch(error => {
          vm.$message.error("执行失败！");
          //console.log(error)
        })
      },
      onOk(index){//点击通过
        let vm=this;
        vm.subIndex=index;
        vm.$confirm('是否将该执行项状态更改为通过，确认将清除检查信息并更改状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.subData.subjects[index].check_status=1;
          vm.tableData[index].check_status=1;
          vm.tableData[index].checkText="已通过";
          vm.tableData[index].check_note="-";
          vm.checkStatus();
          //console.log(vm.tableData)
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },
      onNo(index,name){//点击未通过
        let vm=this;
        vm.noIndex=index;
        vm.noName=name;
        vm.notpassDialogVisible = true;
      },
      onNoSub(){//未通过确定按钮
        let vm=this;
        if(!vm.check_note){
          vm.$message.error("请输入不能通过的理由！");
          return;
        }
        vm.subData.subjects[vm.noIndex].check_status=0;
        vm.subData.subjects[vm.noIndex].check_note=vm.check_note;
        vm.tableData[vm.noIndex].check_status=0;
        vm.tableData[vm.noIndex].checkText="未通过";
        vm.tableData[vm.noIndex].check_note=vm.check_note;
        vm.notpassDialogVisible = false;
        vm.checkStatus();
        vm.check_note="";
      },
      checkStatus(){
        let vm=this;
        for(let i=0 ; i<vm.subData.subjects.length; i++){
          //console.log(vm.subData.subjects.length,vm.subData.subjects[i].check_status)
          if(vm.subData.subjects[i].check_status!=1){
            vm.isOk="未通过"
            return;
          }
          if(vm.subData.subjects[i].check_status==1){
            vm.isOk="已通过"
          }
        }
      }
    }
  }   
</script>



